<template>
	<!-- 商品详情页 -->
	<view class="all" style="background-color: #eeeeee50;">
		<!-- 滚动一定距离出现商品详情tab -->
		<view class="top flex py-3" v-if="top">
			<view class="left" :class="{top_active:!top_isactive}">
				商品
			</view>
			<view class="right" :class="{top_active:top_isactive}">
				详情
			</view>
		</view>
		<!-- 商品介绍 -->
		<!-- 轮播图 -->
		<view class="uni-margin-wrap swiper" style="height:800rpx;">
			<swiper class="" @change="SwiperTab" circular :autoplay="autoplay" :interval="interval" :duration="duration"
				style="height:800rpx;">
				<swiper-item v-for="(item,index) in swiper_Src" @click="" :key="index" v-if="item.isShow">
					<image :src="Domain_IMG+item.Picture_Url" alt="" style="width: 100%; height: 100%;">
				</swiper-item>

			</swiper>
			<!-- 更改指示器样式指示器：数字胶囊 -->
			<view class="number">
				<view class="u-indicator-item-number ">
					{{ uCurrent + 1 }}/{{ swiper_Src.filter(item=>item.isShow).length }}</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goodsInfo py-3 px-4">
			<!-- 新价格 -->
			<view class="price flex  align-center">
				<view style="width: 35rpx; height: 35rpx;">
					<image :src="Domain_ICON+'/price.png'" mode="" class="img"></image>
				</view>
				<text class="font-lg" style="color: green;">{{goods.Unit_Price}}</text>
			</view>
			<!-- 旧价格 -->
			<view class="font-sm flex align-center pt-1" style="color: #ccc;">
				价格
				<view style="width: 14rpx; height: 14rpx; ">
					<image :src="Domain_ICON+'/oldprice.png'" mode="" class="img"></image>
				</view>
				<text style="text-decoration: line-through;">60</text>
			</view>
			<!-- 商品名 -->
			<view class="mt-3 font">
				{{goods.Article_Name}}
			</view>
			<view class="position-absolute flex flex-column align-center" style="right: 30rpx;bottom: 50rpx;">
				<button id="shareBtn" open-type="share"></button>
				<uni-icons type="redo-filled" size="20"></uni-icons>
				<text class="font-sm">分享</text>
			</view>
		</view>
		<!-- 运费 -->
		<view class="mt-2 flex align-center" style="background-color:#fff; height: 100rpx;">
			<view class="px-4 font-sm" style="color: #999;">
				运费
			</view>
			<view class="font-sm">
				免运费
			</view>
		</view>
		<!-- 服务 -->
		<view class="mt-2 flex align-center" style="background-color:#fff; height: 100rpx;" @click="serviceClick()">
			<view class="px-4 font-sm" style="color: #999;">
				服务
			</view>
			<view class="font-sm flex justify-between" style="width: 80%;">
				七天无理由退货·快递发货·到店自提
				<uni-icons type="right" color="#999" size="15"></uni-icons>
			</view>
		</view>
		<!-- 服务介绍 -->
		<view class="service fixed-bottom px-4 pt-2 rounded-top" v-if="service">
			<view class="s-text">
				<view class="s-title">
					7天无理由退货
				</view>
				<view class="s-context">
					请确保完好,包邮商品买家承担退货运费,非包邮商品买家承担来回运费。
					<view class="s-look">
						查看规则详情
					</view>
				</view>
			</view>
			<view class="s-text">
				<view class="s-title">
					快递发货
				</view>
				<view class="s-context">
					可选择快递发货配送上门,本商品免运费。
				</view>
			</view>
			<view class="s-text">
				<view class="s-title">
					到店自提
				</view>
				<view class="s-context">
					可选择就进自提点并预约提货时间。
				</view>
			</view>
			<view class="s-text">
				<view class="s-title">
					同城配送
				</view>
				<view class="s-context">
					可选择同城配送并预约送达时间,本商品运费:最低69.00起送,免运费。
				</view>
			</view>
			<view class="s-text">
				<view class="s-title">
					收货后结算
				</view>
				<view class="s-context">
					该店铺交易由**提供资金存管服务，当符合以下条件时，资金自动结算给商家：买家确认收货或到达约定的自动确认收货日期。交易资金未经**存管的情形（储值型、电子卡券等）不在本服务范围内。
				</view>
			</view>
			<button class="s-btn mt-5" @click="inknow()">我知道了</button>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" @click="()=>{this.service=!this.service}" v-if="service">
		</view>
		<!-- 小康龙江店铺 -->
		<view class="xklj flex justify-between py-3 px-4 mt-2" style="background-color: #fff;">
			<view class="flex">
				<view class="" style="width: 100rpx;height: 100rpx;">
					<image :src="Domain_ICON+'/sponsor.jpg'" mode="" class="img"></image>
				</view>
				<view class="pl-2 font">
					<view class="mb-2">
						小康龙江
					</view>
					<view class="px-1 rounded" style="background-color: red;">
						企业认证
					</view>
				</view>
			</view>
			<view class="xklj_right flex font-small">
				<!-- <view class="right_one">
					关注店铺
				</view> -->
				<view class="right_two">
					进店逛逛
				</view>
			</view>
		</view>
		<!-- 商品详情图片展示 -->
		<view class="px-4 mt-2">
			<view class="w-100" style="height: 900rpx;" v-for="(item,index) in deatil" :key="index" v-if="item.isShow">
				<image :src="Domain_IMG+item.Picture_Url" mode="" class="img"></image>
			</view>
		</view>
		<!-- 商品说明 -->
		<view class="trade px-4 flex align-center justify-between flex-5 mt-2 pt-2 pb-5"
			@click="()=>{this.trade=!this.trade}">
			<view class="trade_one">
			</view>
			<view class="flex align-center justify-between " style="margin-bottom: -15rpx;">
				商品说明
				<uni-icons type="bottom" color="#ccc" size="15" class="ml-1 uni-rotate"
					:class="{rotate:trade}"></uni-icons>
			</view>
			<view class="trade_one">
			</view>
		</view>
		<!-- 商品说明详细 -->
		<view class="tradeDescription px-4 pb-2" v-if="trade">
			<view class="trade_context rounded-lg font py-3 px-2">
				<view class="">
					<text class="font-md text-black">划线价格:</text>
					是商品的专柜价、吊牌价、正品零售价、指导价、曾经展示过的销售价等，并非原价，仅供参考。
				</view>
				<view class="pt-2">
					<text class="font-md text-black">未划线价格:</text>
					是商品的实时价格，不会因具体表述形式的差异改变性质。具体成交价格会因商品参加促销活动，优惠券、积分抵扣等情形发生变化，最终以订单结算页面展示的价格为准。
				</view>
				<view class="pt-2">
					*商家详情页以图片或文字标注的一口价、促销价、优惠价等价格，可能是通过优惠券、积分折扣、满减或特定的促销活动，在特定时间段内形成的价格，具体请以商家促销规则、优惠条件和结算页面的标价为准。此说明仅当出现价格比较时有效，若商家对商品的划线价做了特殊说明，则以特殊说明为准。
				</view>
				<view class="pt-2">
					此页面下的商品/服务的标题、价格、详情等信息内容系由小康龙江店铺发布，其真实性、准确性和合法性均由小康龙江店铺负责。如消费者对服务的标题、价格、详情等任何信息有疑问，请在购买前与小康龙江店铺工作人员沟通确认。
				</view>
			</view>
		</view>
		<botSponsor></botSponsor>
		<view class="bot_bar flex justify-between py-2">
			<view class="left flex font-sm justify-between">
				<view class="item">
					<uni-icons type="chat" size="20"></uni-icons>
					<text class="font">客服</text>
				</view>
				<view class="item" @click="dpClick()">
					<uni-icons type="shop" size="20"></uni-icons>
					<text class="font">店铺</text>
				</view>
				<view class="item">
					<uni-icons type="cart" size="20"></uni-icons>
					<text class="font">购物车</text>
				</view>
			</view>
			<view class="right flex mr-2">
				<view>
					<button class="item_btn font-sm" @click="addCart">加入购物车</button>
				</view>
				<view>
					<button class="item_btn1 bg-success font-sm" @click="buyNow()">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue";
	import {getWX2GoodsDetailIdAction} from "@/api/index.js"
	import { NowTime } from "@/static/js/DateUtil.js"
	import {getWXCheckShopCarAction} from "@/api/article.js"
	import {accMul} from "@/static/js/GeneralUtil.js"
	import {getAddAction} from "@/api/global.js"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			botSponsor,
		},
		data() {
			return {
				// 顶部选项卡
				top: false,
				top_isactive: false,
				deatil: [], // 商品详情图
				// 商品信息
				goods: {}, // 商品信息
				uCurrent: 0,
				tabName: "暂无",
				Domain_IMG: app.globalData.Domain_IMG, //图标域名
				Domain_ICON: app.globalData.Domain_ICON, //图标域名
				swiper_Src: [], //轮播图图片路径
				autoplay: true, // 自动播放
				interval: 2000, //   幻灯片切换时长
				duration: 1000, //  自动播放时长 
				service: false, // 服务介绍开关
				trade: false, // 商品说明开关
				canshu: { // 每次查询需要带的参数
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber
				},
				Store_SerialNumber:''
			}
		},
		onPageScroll(e) {
			// e.scrollTop 表示当前页面滚动的距离
			if (e.scrollTop > 0 && e.scrollTop <= 730) {
				this.top = true;
				this.top_isactive = false
			} else if (e.scrollTop > 730) {
				this.top = true;
				this.top_isactive = true
			} else {
				this.top = false;
				this.top_isactive = false
			}


		},
		onLoad(options) {
			this.canshu.Article_SerialNumber = options.Article_SerialNumber;
			this.Store_SerialNumber = options.Store_SerialNumber;
			this.canshu.Sales_Unit_Price_SerialNumber = options.Sales_Unit_Price_SerialNumber;
			this.tabName = options.name;
			this.getGoods();

		},
		methods: {
			SwiperTab(e) {
				this.uCurrent = Number(e.target.current)
			},
			// 服务弹窗
			serviceClick() {
				this.service = !this.service;
			},
			// 服务弹窗中的我知道了按钮
			inknow() {
				this.service = !this.service;
			},
			dpClick() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			async getGoods() {
				var res = await getWX2GoodsDetailIdAction(this.canshu);
				console.log(res);
				if (res) {
					this.goods = res;
					this.deatil = res.Detail;
					this.swiper_Src = res.Swiper;
					this.swiper_Src.forEach((item, i) => {
						this.CheckImg(item, i);
					});
					this.deatil.forEach((item, i) => {
						this.CheckImg(item, i)
					})
				}
			},
			CheckImg(data, i) {
				uni.getImageInfo({
					src: app.globalData.Domain_IMG + data.Picture_Url,
					success: (res) => {
						data.isShow = true;
					},
					fail: (error) => {
						data.isShow = false;
					},
				});
			},
			// 判断购物车有无相同商品
			async getWXCheckShopCarAction(Sales_Unit_Price_Stock_SerialNumber) {
				console.log(Sales_Unit_Price_Stock_SerialNumber);
				var res = await getWXCheckShopCarAction({
					App_ID:app.globalData.App_ID,
					Open_ID:app.globalData.Open_ID,
					Sales_Unit_Price_Stock_SerialNumber,
				})
				return res;
			},
			// 添加到购物车
			async addCart() {
				if (!this.goods.quantity) {
					this.goods.quantity = 1
				}
				var sales_order = {
					Sales_Order_SerialNumber: '',
					Store_SerialNumber: '',
					Sales_Address: '',
					Sales_Contacts: '',
					Sales_Phone: '',
					Sales_Message: '',
					Sales_Date: NowTime(),
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Sales_Amount: '',
					Collection_Amount: 0,
					Delivery_Amount: 0,
					Receive_Type: 0,
					Refund_Type: 0,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					Row_Status: 8,
					Children: {
						sales_order_detail: [{
							Sales_Order_Detail_SerialNumber: '',
							Sales_Order_SerialNumber: '',
							Sales_Unit_Price_Stock_SerialNumber: this.goods.specifications[0]
								.Sales_Unit_Price_Stock_SerialNumber,
							Article_SerialNumber: this.goods.Article_SerialNumber,
							Article_Specifications_SerialNumber: this.goods.specifications[0]
								.Article_Specifications_SerialNumber,
							Sign: this.goods.specifications[0].Sign,
							Quantity: this.goods.quantity,
							Unit_Price: this.goods.specifications[0].Unit_Price,
							Sales_Unit_Price: this.goods.specifications[0].Sales_Unit_Price,
							Amount: '',
							Row_Status: 8,
							Receive_Type: 0,
							Refund_Type: 0,
						}]
					}
				}
				var res=await this.getWXCheckShopCarAction(this.goods.specifications[0].Sales_Unit_Price_Stock_SerialNumber);
				if(res.length==0){
					// 增加流程
					sales_order.Children.sales_order_detail[0].Amount = accMul(this.goods.specifications[0].Sales_Unit_Price, this.goods.quantity)	
			
					uni.showLoading({
						title: "加载中...",
					});
					this.loading = true;
					var addres = await getAddAction({
						Data: JSON.stringify({
							sales_order: [sales_order]
						}),
						Open_ID: app.globalData.Open_ID
					})
					uni.hideLoading();
					if (addres.Status == "success") {
						uni.showToast({
							title: '提交成功！',
							icon: 'success'
						})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							this.shopcart = false;
						}, 500)
					} else {
						uni.showToast({
							title: '提交失败！',
							icon: 'error'
						})
					}
					this.loading = false;
				}else{
					
					uni.showLoading({
						title: "加载中...",
					});
					this.loading = true;
					// 修改购物车商品数量
					var editres=await editWXEditShopCarQuantity({
						Open_ID:app.globalData.Open_ID,
						Article_SerialNumber:res[0].Article_SerialNumber,
						Quantity:this.goods.quantity,
						Type:"1"
					})
					
					uni.hideLoading();
					if (editres.Status == "success") {
						uni.showToast({
							title: '提交成功！',
							icon: 'success'
						})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							this.shopcart = false;
						}, 500)
					} else {
						uni.showToast({
							title: '提交失败！',
							icon: 'error'
						})
					}
					this.loading = false;
				}
				
			},
			buyNow() {
				let Article = {
					Article_Name: this.goods.Article_Name,
					Store_SerialNumber:this.Store_SerialNumber,
					Category_Name: "普通实物商品",
					Article_SerialNumber:this.goods.Article_SerialNumber,
					Picture_URL: this.goods.Picture_URL,
					Article_Specifications_SerialNumber: this.goods.specifications[0].Article_Specifications_SerialNumber,
					Sales_Unit_Price:this.goods.specifications[0].Sales_Unit_Price,
					Sales_Unit_Price_Stock_SerialNumber: this.goods.specifications[0].Sales_Unit_Price_Stock_SerialNumber,
					Sign: this.goods.specifications[0].Sign,
					Stock_Remain: this.goods.specifications[0].Stock_Remain,
					Stock_Sell: this.goods.specifications[0].Stock_Sell,
					Quantity:1,
					Unit_Price: this.goods.specifications[0].Unit_Price
				}
				uni.navigateTo({
					url: "/pages/index/submitOrder?good=" + encodeURIComponent(JSON.stringify([Article]))
				})
			}
		}
	}
</script>

<style lang="scss">
	#shareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.all {
		padding-bottom: 400rpx;
	}

	.top {
		.top_active {
			border-bottom: 10rpx solid green;
		}

		justify-content: space-around;
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #fff;
		z-index: 10;
		height: 50rpx;

	}

	.swiper {
		width: 100%;
		height: 600rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		/* 指示器样式 */
		.u-indicator-item-number {
			// width: 100rpx;
			padding: 25rpx 40rpx;
			line-height: 0;
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: 100rpx;
			font-size: 30rpx;
			color: rgba(255, 255, 255, 0.8);
			position: absolute;
			right: 20rpx;
			bottom: 50rpx;
			text-align: center;
			letter-spacing: 3rpx;
		}
	}

	.uni-rotate {
		margin-bottom: -15rpx;
		transition: transform 0.5s;
	}

	.rotate {
		transform: rotate(-180deg);
	}

	.mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #00000050;
		z-index: 100;
	}

	.goodsInfo {
		height: 200rpx;
		background-color: #fff;
		position: relative;
	}

	.service {
		z-index: 101;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #fff;

		.s-title {
			font-size: 28rpx;
			margin-top: 30rpx;
		}

		.s-context {
			font-size: 25rpx;
			color: #ccc;

			.s-look {
				color: blue;
			}
		}

		.s-btn {
			border-radius: 50rpx;
			background-color: green;
			color: #fff;
		}
	}

	.xklj {
		.xklj_right {
			view {
				border-radius: 50rpx;
				height: 28rpx;
				padding: 0 20rpx;
			}

			.right_one {
				border: 1px solid #ccc;
				margin-right: 20rpx;
			}

			.right_two {
				border: 1px solid #0f0;
				color: #0f0;
				margin-right: -10rpx;
			}
		}
	}

	.trade {
		height: 50rpx;
		background-color: #fff;

		view {
			height: 50rpx;
		}

		.trade_one {
			width: 34%;
			border-bottom: 1px solid #ccc;
			box-sizing: border-box;
		}
	}

	.tradeDescription {
		background-color: #fff;

		.trade_context {
			background-color: #eee;
			color: #999;
		}
	}

	.bot_bar {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;

		.left {
			width: 35%;
			margin-left: 40rpx;
		}

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			uni-icon {
				margin-bottom: 20rpx;
			}
		}

		.right {
			view {
				font-size: 15rpx;
			}

			button {
				width: 200rpx;
				padding: 8rpx 0;
			}

			.item_btn {
				border-radius: 0;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				background-color: #00000099;
				color: #fff;
			}

			.item_btn1 {
				border-radius: 0;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
				color: #fff;
			}
		}

	}
</style>